<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 200px;
        height: 200px;
        border: 1px black solid;

        /* 子绝父相
           子元素如果使用 position: absolute;
           父元素一般会设置 position: relative;
        
        */
        position: relative;
      }
      .pic1 {
        width: 100px;
        height: 100px;
        /* 开启定位 元素依旧占位 */
        /* position: relative; */

        /* 开启定位 元素不占位 后续元素会补上 */
        position: absolute;
        /* left: 20px; */
        /* bottom: 10px; */
        z-index: 3;

        /*  
          position:absolute
          设置位置，默认是相对于浏览器的窗口
          right:10px 距离右边 多少距离

          同时设置了 left 和 right left 为准
          同时设置了 top 和 bottom top 为准
        */
        right: 10px;
        bottom: 0px;
        left: 0px;
        top: 20px;
      }
      .pic2 {
        width: 100px;
        height: 100px;
        /* z-index要生效 需要结合定位 */
        position: relative;
        /* 调整层级，需要有定位层级才可以生效 */
        z-index: 4;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <img class="pic1" src="./627.gif" alt="" />
      <img class="pic2" src="./xinfen.webp" alt="" />
    </div>
  </body>
</html>
